@import '~styles/config.scss';

.main{
    display: flex;
    border    : 1px solid $--border-color-base;
    height    : 440px;
    .hh{
        background: $--background-color-base;
        padding:12px 10px;
        border-bottom    : 1px solid $--border-color-base;
        line-height:30px;
        margin-bottom:10px;
    }
    .mm{
        padding:10px 14px;
    }
    .alt{
        color:$--color-text-secondary;
    }
    .dis{
        text-align: center;
        padding:20px 0px;
        border-radius: 10px;
        color      : $--color-text-regular;
        border    : 1px dashed $--border-color-base;
    }
}

.form{
    flex:auto;
    margin-left:20px;
}
.phone {
    flex:none;
    width     : 296px;
    height    : 440px;
    background: #fff;
    position  : relative;
    border    : 1px solid $--border-color-base;
    overflow  : hidden;

    .tt {
        background: $--background-color-base;
        position  : relative;
        border-bottom    : 1px solid $--border-color-base;

        .text {
            margin-top: 10px;
            width     : 100%;
            text-align: center;
            display   : flex;

            .i {
                width          : 40px;
                height         : 30px;
                flex           : none;
                display        : flex;
                align-items    : center;
                justify-content: center;
            }

            .t {
                flex       : auto;
                line-height: 30px;
                font-size  : 12px;
            }
        }

        .img {
            width  : 100%;
            display: block;
        }
    }
    .select{
        &.true {
            background: $--background-color-primary-light;
            &::after {
                position  : absolute;
                content   : "";
                top       : 0px;
                left      : 0px;
                width     : 100%;
                height    : 100%;
                box-sizing: border-box;
                border    : 1px solid $--color-primary;
            }
        }
    }

    .footer {
        border-top    : 1px solid $--border-color-base;
        background: $--background-color-base;
        height    : 50px;
        position  : absolute;
        left      : 0px;
        bottom    : 0px;
        width     : 100%;
        display   : flex;

        .icon {
            width          : 50px;
            flex           : none;
            display        : flex;
            align-items    : center;
            justify-content: center;
            font-size      : 24px;
        }

        .item {
            transition : all .5s;
            flex       : 1;
            border-left: 1px solid $--border-color-base;
            line-height: 50px;
            text-align : center;
            font-size  : 12px;
            position   : relative;
            color      : $--color-text-regular;
            cursor     : pointer;

            &:hover {
                color: $--color-primary;
            }

            
        }

        .create {
            border-left    : 1px solid $--border-color-base;
            flex           : auto;
            display        : flex;
            align-items    : center;
            justify-content: center;
            font-size      : 20px;
            cursor: pointer;
        }


        .li {
            transition : all .5s;
            border-top : 1px solid $--border-color-extra-light;
            cursor     : pointer;
            font-size  : 12px;
            position   : relative;
            line-height: 40px;
            color      : $--color-text-regular;
            
            &:first-of-type {
                border-top-width: 0px;
            }

            &:hover {
                color: $--color-primary;
            }
        }
    }

    .popper {
        position     : absolute;
        bottom       : 60px;
        width        : 90%;
        left         : 5%;
        box-sizing   : border-box;
        border       : 1px solid $--border-color-base;
        background   : #fff;
        box-shadow   : 0px 0px 10px rgba(0, 0, 0, 0.1);

        &::after {
            bottom     : -6px;
            left       : 50%;
            margin-left: -6px;
            content    : " ";

            position    : absolute;
            display     : block;
            width       : 0;
            height      : 0;
            border-left : 6px solid transparent;
            border-right: 6px solid transparent;
            border-top  : 6px solid #fff;

        }

        &::before {
            bottom     : -7px;
            left       : 50%;
            margin-left: -7px;
            content    : " ";

            position    : absolute;
            display     : block;
            width       : 0;
            height      : 0;
            border-left : 7px solid transparent;
            border-right: 7px solid transparent;
            border-top  : 7px solid $--border-color-base;

        }

    }
}

.specsType2 {
    margin-left: 100px;

    .box {
        padding      : 0px 10px 10px 10px;
        border       : 1px solid $--border-color-base;
        border-radius: 5px;

        background   : #fff;
        margin-bottom: 10px;
    }

    .ul {
        margin-top: 10px;
    }

    .hh {
        background   : $--background-color-base;
        line-height  : 30px;
        padding      : 10px 20px;
        display      : flex;
        border-radius: 3px;
        border       : 1px solid $--border-color-lighter;

        .l {
            flex: auto;
        }

        .r {
            flex: none
        }
    }

    .mm {
        display    : flex;
        padding    : 0px 0px 10px 0px;
        margin-left: -10px;

        .li {
            width        : fit-content;
            display      : flex;
            flex-wrap    : wrap;
            align-items  : center;
            margin       : 10px 0px 0px 10px;
            line-height  : 30px;
            font-size    : 14px;
            border       : 1px solid $--border-color-lighter;
            border-radius: 5px;

            padding: 0px 10px 0px 0px;


            &.true {
                cursor: pointer;
            }

            &.false {
                opacity: .7;
            }

            .name {
                padding: 3px 10px 3px 14px;
            }

            .del {
                flex         : none;
                width        : 22px;
                height       : 22px;
                line-height  : 20px;
                text-align   : center;
                transition   : all .5s;
                border-radius: 100%;
                font-size    : 12px;
                border       : 1px solid $--border-color-lighter;
                box-sizing   : border-box;

                &:hover {
                    background: $--background-color-light;
                    border    : 1px solid $--border-color-lighter;
                }
            }

            &:hover {
                transition  : all .5s;
                background  : $--background-color-base;
                border-color: $--border-color-lighter;
            }
        }
    }

    .bb {
        padding: 0px 0px 5px 0px;
    }

    .ff {
        padding-top: 10px;
        border-top : 1px solid $--border-color-lighter;
    }
}
